<template>
  <div class="er-container">
    <div class="cloudmusic-plone-login">
      <div class="phone-title">
        <img src="../../assets/tellogin.png" alt="">
      </div>
      <div class="tow-code">
        <h1>扫码登陆</h1>
        <div id="erweima">
          <vue-qr :src="src" text="hello world" :size="200"></vue-qr>
        </div>
        <p>请使用<span>网易云App</span>扫码登录</p>
      </div>
    </div>
    <div class="change-login-t">
      <a href="javascript:;" @click="goOtherPhoneLogin">选择其他登录模式</a>
    </div>
  </div>
</template>
<script>
import { getKeyApi, getQrCodeApi, getQrCodeStatusApi } from '@/requset/api.js'
export default {
  name: 'erweima',
  data() {
    return {
      // 保存二维码 base64 编码
      src: null,
      // 保存二维码 key
      key: null
    }
  },
  methods: {
    // 监听 cookie 的函数
    watchCookie(i) {
      if (i) {
        clearTimeout(this.qrtimer)
        return
      }
      if (this.$cookie.get('token') === null) {
        // 调用获取二维码状态的 接口
        getQrCodeStatusApi(this.key).then(({ data: res }) => {
          console.log(res)
          if (res.cookie !== '') {
            this.$cookie.set('token', res.cookie)
            console.log(res, '二维码已扫描，token已存储!')
          }
        })
      }
      // 定义定时器，使用 递归
      this.qrtimer = setTimeout(() => {
        console.log('等待用户扫码')
        return this.watchCookie()
      }, 5000)
      // 如果有 token 就清除定时器
      if (this.$cookie.get('token') !== null) {
        clearTimeout(this.qrtimer)
      }
    },
    goOtherPhoneLogin() {
      this.$store.commit('goOtherLogin')
    }
  },
  created() {
    // 获取二维码 key
    getKeyApi()
      .then(({ data: { data: res } }) => {
        if (res.unikey) {
          this.key = res.unikey
          return getQrCodeApi(res.unikey)
        }
      })
      // 获取 二维码 的 base64格式
      .then(({ data: { data: res } }) => {
        this.src = res.qrimg
      })
    if (this.$cookie.get('token') === null) {
      this.watchCookie()
    }
  },
  beforeDestroy() {
    this.watchCookie('no')
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/base.less';
.er-container {
  position: relative;
  border: 1px solid #000;
  height: 315px;
  padding-top: 25px;
  box-sizing: border-box;
}
.cloudmusic-plone-login {
  width: 100%;
  height: 80%;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 5px;
  .phone-title {
    height: 90%;
    img {
      height: 100%;
    }
  }
  .tow-code {
    text-align: center;
    height: 90%;
    padding-top: 8px;
    box-sizing: border-box;
    img {
      margin-top: 10px;
      width: 80%;
    }
    p {
      font-size: 12px;
      color: #999999;
      span {
        color: #0c73c2;
        margin: 0 5px;
        cursor: pointer;
      }
    }
  }
}
.change-login-t {
  text-align: center;
  a {
    display: inline-block;
    text-decoration: none;
    font-size: 12px;
    border: 1px solid #979797;
    color: #000;
    border-radius: 50px;
    padding: 8px 12px;
  }
}
</style>